/**
 * Created by luojie on 2018/3/15.
 */

import "../css/courseSite.scss"
import Layout from "../components/layout";
const site  = require("../images/course-site.png");
export default class Site extends React.PureComponent{
	constructor(props){
		super(props);
	}
	componentDidMount(){
		setTimeout(()=>{
			this.renderMap();
		},0)
	}
	renderMap(){
		let mp = new BMap.Map("map");            // 创建Map实例
		let point = new BMap.Point(104.014591,30.575728); // 创建点坐标
		mp.centerAndZoom(point,15);
		// mp.enableScrollWheelZoom();                 //启用滚轮放
		// map.enableDragging();

		// 复杂的自定义覆盖物
		function ComplexCustomOverlay(point, text, mouseoverText){
			this._point = point;
			this._text = text;
			this._overText = mouseoverText;
		}
		ComplexCustomOverlay.prototype = new BMap.Overlay();
		ComplexCustomOverlay.prototype.initialize = function(map){
			this._map = map;
			var div = this._div = document.createElement("div");
			div.style.position = "absolute";
			div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
			div.style.color = "white";
			div.style.height = "120px";
			div.style.width = "200px";
			div.style.whiteSpace = "nowrap";
			div.style.MozUserSelect = "none";
			div.style.fontSize = "12px"
			var span = this._span = document.createElement("span");

			var that = this;

			var arrow = this._arrow = document.createElement("div");
			arrow.style.background = `url(${require("../images/map-site.png")}) no-repeat`;
			arrow.style.position = "absolute";
			arrow.style.width = "200px";
			arrow.style.backgroundSize = "100% 100%";
			arrow.style.height = "120px";
			arrow.style.top = "0";
			arrow.style.left = "50px";
			arrow.style.overflow = "hidden";
			div.appendChild(arrow);

			mp.getPanes().labelPane.appendChild(div);

			return div;
		}
		ComplexCustomOverlay.prototype.draw = function(){
			var map = this._map;
			var pixel = map.pointToOverlayPixel(this._point);

			this._div.style.left = pixel.x - parseInt(this._arrow.style.left)-44 + "px";
			this._div.style.top  = pixel.y - 120 + "px";
		}

		var myCompOverlay = new ComplexCustomOverlay(point, "银湖海岸城");

		mp.addOverlay(myCompOverlay);
	}
	render(){
		return(
			<Layout {...this.props} active = "courseSite">
				{/*<img className="course-site" src={site} alt=""/>*/}
				<div id = "map" className="course-site">
					d
				</div>
			</Layout>
		)
	}
}